<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浏览页面</title>
	<link rel="stylesheet" href="${basePath}/front/css/ViewPage.css">
	<link rel="icon" href="${basePath}/front/images/Tomorrow03.png" sizes="32x32">
</head>
<body>
<!-- 顶部导航栏开始 -->
<div class="header">
	<div class="inner">
		<div class="logo">
			<!-- 点击后回到首页 -->
			<a href="/frontIndex" id="boke"><img src="${basePath}/front/images/Tomorrow01.png" alt=""></a>
		</div>
		<div class="nav">
			<ul>
				<li><a href="/article/front/toEditArticle"><i></i>发布文章</a></li>
				<li><a href="/user/front/toRegister"><i></i>注册</a></li>
				<li><a href="/user/front/toLogin"><i></i>登录</a></li>
			</ul>
		</div>
	</div>
</div>
<!-- 顶部导航栏结束 -->
<!-- 文章浏览部分开始 -->
<div class="view">
	<div class="title">
		<h1>
			THE 1975
			<span class="name">${articleVO.articleTitle}</span>
			<span class="eyes"><i></i>${articleVO.articleViewNumber}</span>
			<span class="postTime">
					<fmt:formatDate value="${articleVO.articleSendTime}" pattern="yyyy年MM月dd日" />
				</span>
			<span class="type">${articleVO.categoryName}</span>
		</h1>


	</div>
	<div class="text">
		<div class="main">
			<p>
				${articleVO.articleContent}
			</p>
		</div>
		<div class="today">
			<h3>今日</h3>
			<p id="today">
				<div class="y" id="y"></div>
				<div class="m" id="m"></div>
				<div class="d" id="d"></div>
			</p>
		</div>
		<div class="broadside">
			<h3>公告</h3>
			<p>Billboard确认，Taylor Swift新专辑《Lover》首周总销量高达86.7万！！实销高达67.9万！👏👏👏这也是自《reputation》以来美国最高的首周销量！《Lover》也成为2019年美国实销最高的专辑！！Taylor Swift也成为史上第一位拥有6张专辑单周销量超过50万的女歌手！在现在实销疯狂萎缩的市场能取得这样的成绩真的太Slay！！！</p>
		</div>
		<div></div>
	</div>
</div>
<!-- 文章浏览部分结束 -->
<!-- 评论部份开始 -->
<div class="common">
	<div class="commonT">
		<h3>评论区</h3>
	</div>
	<div class="commonM">
		<table>
			<c:forEach items="${articleVO.comments}" var="comments">
				<tr>
					<td>
						<h4>${comments.userName}</h4>
						<p>
								${comments.commentsContent}
							<a class="commonA" id="commonA">回复</a>
						</p>
						<input type="text" class="textBack" id="textBack">
						<a class="commonB" id="commonB">确定</a>
						<a class="commonC" id="commonC">取消</a>
					</td>
				</tr>
			</c:forEach>
		</table>
	</div>
</div>
<!-- 评论部份结束 -->
<!-- 底部开始	 -->
<div class="bottom">
	<div class="team">
		<span>郑鹏</span>
		<span>钟天福</span>
		<span>王齐乐</span>
		<span>许敏敏</span>
	</div>
	<div class="phone">
		<p>联系方式: &nbsp;<a href="#">xxxx@xx.com</a> | <a href="#">xxxx@xx.com</a> | <a href="#">xxxx@xx.com</a> | <a href="#">xxxx@xx.com</a></p>
	</div>
</div>
<!-- 底部结束 -->

<!-- 回到顶部按钮 -->
<div class="backToTop" id="btnTop">
	<i class="i"></i>
</div>
<!-- 回到顶部按钮 -->
<script src="${basePath}/front/js/ViewPage.js"></script>
</body>
</html>